<template>
  <div :id="id" :style="{ height: height }" style="width: 100%;" />
</template>

<script>
import echarts from 'echarts'
import resize from '@/components/Charts/mixins/resize'
import { parseTime } from '@/utils/index'
export default {
  name: 'LineChart',
  components: {},
  mixins: [resize],
  props: {
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    timeType: {
      type: String,
      default: '{h}:{i}'
    },
    chartData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartData: function(val) {
      this.$nextTick(() => {
        this.initChart()
      })
    }
  },
  mounted() {
    // this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    parseTime,
    initChart() {
      // if (!this.chart) {
      this.chart = echarts.init(document.getElementById(this.id))
      // }
      console.log(this.chartData)
      const color = [
        '#9837DD',
        '#3EEFE8',
        '#FFC005',
        '#FF515A',
        '#8B5CFF',
        '#00CA69',
        '#2459E0',
        '#EBA116'
      ]
      const xAxisData = this.chartData.dtList ? this.chartData.dtList.map(item => {
        return item ? this.parseTime(item, '{m}-{d} {h}:{i}:{s}') : '' // {y}-{m}-{d} {h}:{i}:{s}  this.timeType
      }) : []

      const hexToRgba = (hex, opacity) => {
        let rgbaColor = ''
        const reg = /^#[\da-f]{6}$/i
        if (reg.test(hex)) {
          rgbaColor = `rgba(${parseInt('0x' + hex.slice(1, 3))},${parseInt(
            '0x' + hex.slice(3, 5)
          )},${parseInt('0x' + hex.slice(5, 7))},${opacity})`
        }
        return rgbaColor
      }

      const seriesData = this.chartData.series ? this.chartData.series.map((item, index) => {
        return {
          name: item.name[0],
          type: 'line',
          smooth: true,
          showSymbol: false,
          zlevel: 3,
          lineStyle: {
            width: 5,
            normal: {
              color: color[index % 8],
              shadowBlur: 3,
              shadowColor: hexToRgba(color[index % 8], 0.5),
              shadowOffsetY: 8
            }
          },
          data: item.data
        }
      }) : []
      const legend = seriesData ? seriesData.map(item => {
        const name = item.name ? item.name : ''
        // if (name.search('折算') === -1) {
        //   return name
        // }
        return name
      }) : []

      // const xAxisData = echartData.map((v) => v.name)
      // const yAxisData1 = echartData.map((v) => v.value)
      // [100, 138, 350, 173, 180, 150, 180, 230]
      // const yAxisData2 = echartData.map((v) => v.value2)
      // [233, 233, 200, 180, 199, 233, 210, 180]
      const option = {
        backgroundColor: '',
        color: color,
        legend: {
          // show: false,
          data: legend
          // left: 'left'
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {
              show: true,
              excludeComponents: ['toolbox'],
              pixelRatio: 2
            }
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          top: 10, right: 10, bottom: 25
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: 'rgba(0,0,0,0.6)'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#152d92'
              }
            },
            data: xAxisData
          }
        ],
        yAxis: [
          {
            type: 'value'

          }
        ],
        series: seriesData
      }
      // this.chart.setOption(option)
      this.chart.setOption(option, true)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
